<script setup>
import { useFetchOnWatch } from "./fetch.js"
import { ref, computed } from 'vue'

const baseUrl = "https://jsonplaceholder.typicode.com/todos/"
const id = ref("1")
const url = computed(() => baseUrl + id.value)
const { data, error, retry } = useFetchOnWatch(url)
</script>

<template>
    Load post id:
    <button v-for="i in 5" :key="i" @click="id = i">{{ i }}</button>

    <div v-if="error">
        <p>Oops! Something went wrong: {{ error.message }}</p>
        <button @click="retry">Retry</button>
    </div>
    <div v-else-if="data">
        Data load: {{ data }}
    </div>
    <div v-else>
        Loading...
    </div>
</template>